<template>
  <div>
    <div class="head">
      <div v-if="personalMsg.avatar.length" class="avatar">
        <el-avatar
          shape="square"
          :size="300"
          fit="scale-down"
          :src="store.state.msg.avatar"
        ></el-avatar>
        <input type="file" @change="uploadFilds($event)" title="点击上传图片" />
      </div>
    </div>

    <el-form
      :model="personalMsg"
      status-icon
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="username">
        <el-input
          type="text"
          :placeholder="personalMsg.username"
          v-model="personalMsg.username"
        ></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-input
          type="text"
          :placeholder="personalMsg.sex"
          v-model="personalMsg.sex"
        ></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input
          type="textarea"
          :placeholder="personalMsg.desc"
          v-model="personalMsg.desc"
        ></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="emial">
        <el-input
          type="text"
          :placeholder="personalMsg.email"
          v-model="personalMsg.email"
        ></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input
          type="text"
          :placeholder="personalMsg.phone"
          v-model="personalMsg.phone"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">更新</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { onMounted, reactive, toRefs } from "vue";
import { http } from "../../utils/http/index";
import { ElMessage } from "element-plus";
import { useStore } from "vuex";
const store = useStore();
let personalMsg = reactive({
  avatar: "",
  sex: "",
  desc: "",
  phone: "",
  email: "",
  _id: "",
  username: "",
});
let msg = reactive({ data: [] });
onMounted(async () => {
  let res = await http.post("/user/find", {
    username: store.state.msg.username,
  });
  personalMsg.avatar = res.msg.avatar;
  personalMsg.sex = res.msg.sex;
  personalMsg.desc = res.msg.desc;
  personalMsg.phone = res.msg.phone;
  personalMsg.email = res.msg.email;
  personalMsg._id = res.msg._id;
  personalMsg.username = res.msg.username;
});

// 头像上传
const uploadFilds = async (e) => {
  const files = e.target.files;
  const formDate = new FormData();
  // 遍历对象中的每一个文件，并逐一添加到 formDate 实例对象中
  for (let file of Object.values(files)) {
    console.log(file);
    formDate.append("img", file);
  }
  formDate.append('_id', personalMsg._id);
  let res = await http.post("/user/upload",  formDate);
  if (res.code === 200) {
    ElMessage.success({
      message: "上传成功",
      type: "success",
    });
    store.dispatch('userAvatar', res.url)
  } else {
    ElMessage.error("上传失败！");
  }
};

// 用户资料更新
const submitForm = async () => {
  console.log(personalMsg);
  let res = await http.post("/user/updateMsg", personalMsg);
  ElMessage.success({
    message: "更新成功",
    type: "success",
  });
};
</script>

<style lang="scss" scoped>
.head {
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar {
  position: relative;
  input {
    cursor: pointer;
    width: 300px;
    height: 300px;
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 10;
    opacity: 0;
  }
}
.el-form {
  width: 50%;
  margin: 50px auto 0;
  div:last-child {
    div {
      button {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
</style>